<template>
  <div class="mmm">
    <!-- 头部 -->
    <header>
      <!-- 已经登录 -->
      <div class="login banner" v-if="isLogin">
        <van-row> </van-row>
        <van-row>
          <van-col span="11" offset="1">
            <van-row type="flex" align="center">
              <van-image
                width="1.76rem"
                height="1.76rem"
                round
                :src="userInfo.photo"
              >
              </van-image>
              <span class="moblie">{{ userInfo.name }}</span>
            </van-row>
          </van-col>
          <van-col
            span="6"
            offset="6"
            style="
              display: flex;
              align-items: center;
              height: 1.76rem;
              justify-content: center;
            "
          >
            <van-button
              type="default"
              size="mini"
              round
              style="height: 0.42667rem"
              @click="$router.push('/user')"
              >编辑资料</van-button
            >
          </van-col>
        </van-row>
        <van-row class="grids">
          <van-grid :border="false">
            <van-grid-item text="头条">
              <template #icon>{{ userInfo.art_count }} </template>
            </van-grid-item>
            <van-grid-item text="粉丝">
              <template #icon>{{ userInfo.fans_count }} </template>
            </van-grid-item>
            <van-grid-item text="关注">
              <template #icon>{{ userInfo.follow_count }}</template>
            </van-grid-item>
            <van-grid-item text="获赞">
              <template #icon>{{ userInfo.like_count }}</template>
            </van-grid-item>
          </van-grid>
        </van-row>
      </div>
      <!-- 未登录 -->
      <div class="logout banner" v-else>
        <div class="img-wrap" @click="dl">
          <van-image
            width="1.76rem"
            height="1.76rem"
            :src="require('@/assets/images/mobile.png')"
          ></van-image>
          <span class="text">登录/注册</span>
        </div>
      </div>
    </header>
    <!-- 主体 -->
    <main>
      <van-grid :column-num="2">
        <van-grid-item text="收藏">
          <template #icon>
            <span class="iconfont icon-shoucang"></span>
          </template>
        </van-grid-item>
        <van-grid-item text="历史">
          <template #icon>
            <span class="iconfont icon-lishi"></span>
          </template>
        </van-grid-item>
      </van-grid>
      <van-cell title="消息通知" is-link />
      <van-cell title="小智同学" is-link />
    </main>
    <!-- 底部 -->
    <footer>
      <van-button block v-if="isLogin" @click="tc">退出</van-button>
    </footer>
  </div>
</template>

<script>
import { getUserAPI } from '@/api'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  computed: {
    ...mapGetters(['isLogin'])
  },
  async created() {
    this.getUserInfo()
  },
  methods: {
    dl() {
      this.$router.push('/login')
    },
    async getUserInfo() {
      if (this.isLogin) {
        const { data } = await getUserAPI()
        this.userInfo = data.data
      }
    },
    async tc() {
      try {
        await this.$dialog.confirm({
          title: '黑马头条',
          message: '是否确认退出改账号'
        })
        this.$store.commit('SET_TOKEN', {})
      } catch {}
    }
  }
}
</script>

<style scoped lang="less">
.mmm {
  height: calc(100vh - 100px);
  background-color: #f5f7f9;
}
.banner {
  width: 100%;
  height: 5.33333rem;
  background: url('@/assets/images/banner.png') no-repeat 0 0 / cover;
}
.logout {
  display: flex;
  justify-content: center;
  align-items: center;
  .img-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .text {
      font-size: 0.4rem;
      color: #fff;
      margin-top: 0.26667rem;
    }
  }
}
.login {
  display: flex;
  flex-direction: column;

  > .van-row {
    flex: 1;
    .moblie {
      font-size: 0.4rem;
      color: #fff;
      margin-left: 0.29333rem;
    }
  }
}
:deep(.grids) {
  color: white;
  font-size: 0.4rem;
  .van-grid-item__content {
    background-color: unset;
  }
  .van-grid-item__text {
    color: white;
  }
}
.icon-shoucang {
  color: orangered;
}
.icon-lishi {
  color: orange;
}
footer .van-button {
  color: red;
}
</style>